<template>
	<view>
		<OnlineQueryForm ref="queryForm" :key="formKey" v-if="isReady && formConfig.formType === SysOnlineFormType.QUERY"
			:formConfig="formConfig" @changeSub="changeSub" />
		<OnlineEditForm :key="date" v-if="isReady && formConfig.formType === SysOnlineFormType.FORM" :formConfig="formConfig"
			:rowData="rowData" :saveData="saveData" @close="onClose" />
		<OnlineWorkflowForm :key="formKey" ref="workflow" v-if="isReady && formConfig.formType === SysOnlineFormType.FLOW"
			:readOnly="readOnly" :flowInfo="flowInfo" :formConfig="formConfig" @close="onClose" />
		<OnlineWorkOrderForm :key="formKey" ref="workorderform" v-if="isReady && formConfig.formType === SysOnlineFormType.WORK_ORDER" :readOnly="readOnly"
			:entryId="entryId" :formConfig="formConfig" @close="onClose" />
		<OnlineOneToOneQueryForm :key="formKey" ref="relationSelectForm" v-if="isReady && formConfig.formType === SysOnlineFormType.ONE_TO_ONE_QUERY"
			:formConfig="formConfig" @close="onClose" />
		<u-row v-if="!isReady" type="flex" align="center" justify="center"
			style="width: 100vw; height: 100vh; background: white;">
			<u-loading mode="circle">加载中...</u-loading>
		</u-row>
	</view>
</template>

<script>
	import {
	  OnlineFormController
	} from '@/api/onlineController.js'
	import OnlineWorkflowForm from './OnlineWorkflowForm.vue'
	import OnlineWorkOrderForm from './OnlineWorkOrderForm.vue'
	import OnlineQueryForm from './OnlineQueryForm.vue'
	import OnlineEditForm from './OnlineEditForm.vue'
	import OnlineOneToOneQueryForm from './OnlineOneToOneQueryForm.vue'
	export default {
		name: 'onlineForm',
		props: {
			formId: {
				type: String
			},
			entryId: {
				type: String
			},
			rowData: {
				type: Object
			},
			saveData: {
				type: Boolean,
				default: true
			},
			flowInfo: {
				type: Object
			},
			readOnly: {
				type: Boolean,
				default: false
			}
		},
		components: {
			OnlineWorkflowForm,
			OnlineWorkOrderForm,
			OnlineQueryForm,
			OnlineEditForm,
			OnlineOneToOneQueryForm
		},
		data() {
			return {
				formConfig: undefined,
				isReady: false,
				formKey: 0,
				date: (new Date()).valueOf()
			}
		},
		methods: {
			changeSub() {
				this.$emit('changeSub');
			},
			toggleDelete() {
				if (this.$refs.queryForm) this.$refs.queryForm.toggleDelete();
			},
			closeSubPage() {
				if (this.$refs.queryForm) this.$refs.queryForm.closeSubPage();
			},
			onClose(refresh, data) {
				// this.isReady = false
				this.$emit('close', refresh, data);
			},
			clear() {
				if (this.formConfig) {
					this.formConfig.datasourceMap = null;
					this.formConfig.relationMap = null;
					this.formConfig.tableMap = null;
					this.formConfig.columnMap = null;
					this.formConfig.dictMap = null;
					this.formConfig.linkageMap = null;
				}
				this.formConfig = null;
			},
			loadOnlineFormConfig() {
				this.isReady = false
				if (!this.formId) return
				this.clear()
				OnlineFormController.render(this, {
					formId: this.formId
				}).then(res => {
					let onlineForm = res.onlineForm;
					let formConfigData = JSON.parse(onlineForm.widgetJson);
					formConfigData = formConfigData.mobile;
					if (formConfigData != null) {
						this.formConfig = {
							rawData: res,
							readOnly: this.readOnly,
							formName: onlineForm.formName,
							formType: onlineForm.formType,
							formKind: onlineForm.formKind,
							masterTableId: onlineForm.masterTableId,
							labelWidth: formConfigData.labelWidth,
							labelPosition: formConfigData.labelPosition,
							filterItemWidth: formConfigData.filterItemWidth,
							gutter: formConfigData.gutter,
							height: formConfigData.height,
							width: formConfigData.width,
							widgetList: formConfigData.widgetList,
							operationList: (formConfigData.operationList || []).sort((value1, value2) => {
								return (value1.showOrder || 0) - (value2.showOrder || 0)
							}),
							tableWidget: formConfigData.tableWidget,
							leftWidget: formConfigData.leftWidget,
							customFieldList: formConfigData.customFieldList,
							formEventList: formConfigData.formEventList,
							maskFieldList: formConfigData.maskFieldList
						}
						this.isReady = true;
					} else {
						uni.showModal({
							title: '提示',
							content: '没有找到移动端配置信息！',
							success:(res)=>{
								if(res.confirm){
									uni.navigateBack()
								}else{}
								
							}
						})
					}
				}).catch(e => {});
			},
			getFormData(isDraft, variableList) {
				return this.$refs.workflow ? this.$refs.workflow.getFormData(isDraft, variableList) : Promise.reject();
			}
		},
		watch: {
			formId: {
				handler() {
					this.loadOnlineFormConfig()
					this.formKey++
				},
				immediate: true
			},
			rowData: {
				handler(newVal) {
					this.loadOnlineFormConfig()
					this.formKey++
				},
				immediate: true
			}
		}
	}
</script>

<style>
</style>